<script>
/*
* @Author: han
* */
export default {
  name: "sh-new-card",
  created() {
    this.$http('common.getDetailmodules',{flag: 'type'})
        .then(res=>{
          if(res.data.length > 1){
            this.dataList = res.data.splice(0,res.data.length-2).map(item=>{
              return JSON.parse(item.moduleContent)
            })
            this.twoList = res.data.splice(res.data.length - 2,res.data.length).map(item=>{
              return JSON.parse(item.moduleContent)
            })
          }
        })
  },
  data() {
    return {
      dataList:[
        {
          name: '学生专区',
          title: '学生生活好帮手',
          color: '#00438d',
          background: 'https://image.hzwltb69.com/app/date/2023/newcard1.png',
		  cardimg:'https://image.hzwltb69.com/app/date/2023/newcard-the1.png',
          path:'/pages/goods/index-components/students'
        },
        {
          name: '美妆护肤',
          title: '打造自然美妆',
          color: '#de1c33',
          background: 'https://image.hzwltb69.com/app/date/2023/newcard2.png',
		  cardimg:'https://image.hzwltb69.com/app/date/2023/newcard-the2.png',
          path:'/pages/goods/index-components/makeup'
        },
        {
          name: '家用电器',
          title: '智能科技，轻松生活',
          color:'#2178c1',
          background: 'https://image.hzwltb69.com/app/date/2023/newcard3.png',
		  cardimg:'https://image.hzwltb69.com/app/date/2023/newcard-the3.png',
          path:'/pages/goods/index-components/appliance'
        },
        {
          name: '孕婴童',
          title: '妈咪宝贝，关爱相伴',
          color:'#7948ea',
          background: 'https://image.hzwltb69.com/app/date/2023/newcard4.png',
		  cardimg:'https://image.hzwltb69.com/app/date/2023/newcard-the4.png',
          path:'/pages/goods/index-components/children'
        },
      ],
	  twoList:[
		  {
			  name: '名优家纺',
			  title: '精挑细选,独特品味',
			  color:'#2178c1',
			  background: 'https://image.hzwltb69.com/app/date/2023/newcard5.png',
			  cardimg:'https://image.hzwltb69.com/app/date/2023/newcard-the5.png',
			  path:'/pages/goods/index-components/beddings'
		  },
		  {
			  name: '大健康',
			  title: '人生最宝贵的财富',
			  color:'#ca6e14',
			  background: 'https://image.hzwltb69.com/app/date/2023/newcard6.png',
			  cardimg:'https://image.hzwltb69.com/app/date/2023/newcard-the6.png',
			  path:'/pages/goods/index-components/health'
		  }
	  ]
    };
  },
  methods:{
	  onGoPage(e){
      e.id = e.nextCatId
      if(e.path == '/pages/goods/index-components/appliance'){
        this.$Router.push({
          path: "/pages/goods/sh-act-goodslist",
          query: e
        });
        return
      }
      if(e.path == '/pages/goods/index-components/beddings'){
        this.$Router.push({
          path: "/pages/goods/categorydetailmodel",
          query: { id: '1115' ,name: '名优家纺'}
        });
        return
      }
      if(e.path  == '/pages/goods/index-components/health'){
        this.$Router.push({
          path: "/pages/goods/categorydetailmodel",
          query: { id: '1472' ,name: '大健康'}
        });
        return
      }
      this.$Router.push({
        path: e.path,
        query: e
      })
	  }
  }
}
</script>

<template>
	<view class="con">
		<view class="content">
		  <view
		      class="card"
		      :style="{'color':item.color,'background-image':`url(${item.background})`}"
		      v-for="item,index in dataList"
		      :key="index"
			  @click="onGoPage(item)"
		  >
		    <view class="name">{{item.name}}</view>
		    <view class="title">{{item.title}}</view>
		    <view class="imgbox">
				  <image :src="item.cardimg" ></image>
			  </view>
		  </view>
		</view>
		<view class="content-two">
			<view class="card"
			v-for="item,index in twoList"
			:key="index"
      @click="onGoPage(item)"
			:style="{'color':item.color,'background-image':`url(${item.background})`}"
			>
        <view>
          <view class="name">{{item.name}}</view>
          <view class="title">{{item.title}}</view>
        </view>
        <view class="imgbox">
          <image :src="item.cardimg" ></image>
        </view>

			</view>
			</view>
		</view>


</template>

<style scoped lang="scss">
.con{
	padding: 0 20rpx 0 20rpx;
}
.content-two{
  margin-top: 10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.card{
			width: 351rpx;
			height: 152rpx;
			border-radius: 7rpx;
			background-size: 100%;
			background-repeat: no-repeat;
      display: flex;
      justify-content: space-between;
    padding-left: 20rpx;
    .name{
      font-size: 28rpx;
      font-weight: 600;
      margin-top: 20rpx;

    }
    .title{
      margin-top: 5rpx;
      font-size: 22rpx;
    }
    .imgbox{
      margin-top: 10rpx;
      margin-right: 10rpx;
      width: 138rpx;
      height: 138rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }

	}
}
.content {
  width: 100%;
  height:290rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .card{
      // width: 172rpx;
	  width: 166rpx;
      height: 285rpx;
      left: 10rpx;
      top: 300rpx;
      // opacity: 0.6;
      border-radius: 7rpx;
	  padding-top: 20rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-start;
	  align-items: center;
	  background-repeat: no-repeat;
	  background-size:100% 105%;
	  border-radius: 15rpx;
    .name{
      font-size:28rpx;
	  font-weight: 600;
	  margin-bottom: 10rpx;
    }
    .title{
      font-size: 22rpx;
    }
    .imgbox{
      width:139rpx;
      height: 139rpx;
      // background: red;
      margin-top: 30rpx;
	  image{
		  width: 100%;
		  height: 100%;
	  }
    }
  }
}
</style>